<template>
  <div class="package-main">
    <ul class="main-wrap">
      <li
        v-for="(item,index) in allData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :key="index"
        class="main-item"
      >
        <el-card :body-style="{ padding: '0px' }" class="nav-item" shadow="never">
          <div class="image">
            <img :src="item.largePicture" style="width:100%;"/>
            <span class="right-tip">{{ item.courseNum }}个课程</span>
          </div>
          <ul class="class-body">
            <li class="title">{{ item.title }}</li>
            <li class="class-detail">
              <span>{{ item.detail }}</span>
            </li>
            <li class="price">
              <span class="real">￥{{ item.price }}</span>
              <span class="ago">￥{{ item.price }}</span>
            </li>
            <li class="class-button">
              <el-button size="mini" type="primary" @click="update(item.id)">管理</el-button>
              <el-button v-if="item.status === 'closed'" size="mini" type="success" @click="updateClassroomStatus(item)">发布</el-button>
              <el-button v-if="item.status === 'published'" size="mini" @click="updateClassroomStatus_1(item)">关闭</el-button>
              <el-button size="mini" @click="deleteCLick(item.id)">删除</el-button>
            </li>
          </ul>
<!--          <span-->
<!--            :class="{published:item.published}"-->
<!--            class="left-tip"-->
<!--          >{{ item.status ? '在售': '停售' }}</span>-->
        </el-card>
      </li>
    </ul>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :page-count="pageCount"
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteId)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
  </div>
</template>

<script>
  import {deleteClassroom, getClassroomList, updateClassroom} from '@/api/subject/classroom'; // 数据接口
  import {getTenantId} from '@/utils/auth';
  import eventBus from './eventBus.js'

  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        allData: [],
        name: '',
        handleDelete: false,//删除
        deleteId: '',
        deleteCLick(id) {
          this.handleDelete = true;
          this.deleteId = id;
        },
      }
    },
    computed: {
      pageCount() {
        return Math.ceil(this.allData.length / 10)
      }
    },
    mounted() {
      this.getCourseList();
      this.acceptWord()
    },
    methods: {
      updateClassroomStatus(item) {
        item.status = 'published';
        updateClassroom(item).then(() => {
          this.$notify({
            title: '成功',
            message: '发布成功！',
            type: 'success',
            duration: 2000
          });
          this.getData()
        })
      },
      updateClassroomStatus_1(item) {
        item.status = 'closed';
        updateClassroom(item).then(() => {
          this.$notify({
            title: '成功',
            message: '关闭成功！',
            type: 'success',
            duration: 2000
          });
          this.getData()
        })
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      getCourseList() {
        getClassroomList(getTenantId(), this.name).then(response => {
          this.allData = response.data.items
        }).catch(() => {
        })
      },
      deleteData(id) {
        this.handleDelete = false;
        deleteClassroom(id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getCourseList();
        })
      },
      update(id) {
        this.$router.push({name: 'Create-classpackage', params: {ID: id}})
      },
      // 接收兄弟传值
      acceptWord() {
        eventBus.$on('acceptKeyWord', (data) => {
          this.name = data;
          this.getCourseList()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .package-main {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    min-width: 1003px;

    .main-wrap {
      overflow: hidden;
      list-style: none;
      padding: 0;
      width: 110%;
      margin: 0 -67px 0 0;

      .main-item {
        margin-top: 20px;
        width: 16.58%;
        float: left;
        margin-right: 2%;
        height: 300px;

        .nav-item {
          width: 100%;
          min-width: 170px;
          position: relative;

          .el-card__body {
            min-width: 170px;
          }

          .left-tip {
            display: inline-block;
            width: 50px;
            height: 25px;
            line-height: 25px;
            position: absolute;
            top: 12px;
            left: 0;
            background-color: rgba(228, 44, 44, 0.9);
            text-align: center;
            color: #fff;
            font-size: 14px;
          }

          .published {
            background-color: rgba(14, 212, 135, 0.9);
          }

          .image {
            position: relative;
            width: 100%;
            height: 170px;
            overflow: hidden;
            @media screen and (max-width: 1600px) {
              height: 130px;
            }

            img {
              width: 100%;
              height: 100%;
            }

            .right-tip {
              display: inline-block;
              position: absolute;
              right: 0;
              bottom: 4px;
              padding: 0 5px;
              height: 26px;
              line-height: 26px;
              text-align: center;
              font-size: 14px;
              color: #fff;
              border-radius: 3px;
              background-color: rgba(0, 0, 0, 0.6);
            }
          }

          .class-body {
            list-style: none;
            margin: 0;
            padding: 8px 14px 0 14px;
            @media screen and (max-width: 1330px) {
              padding: 14px 4px;
            }

            .title {
              font-size: 16px;
              color: #626669;
            }

            .price {
              height: 32px;
              line-height: 32px;

              .real {
                float: left;
                font-size: 18px;
                color: #f21d1d;
                @media screen and (max-width: 1490px) {
                  font-size: 14px;
                }
              }

              .ago {
                font-size: 12px;
                text-decoration: line-through;
                color: #c5c8cb;
                @media screen and (max-width: 1490px) {
                  font-size: 10px;
                }
                @media screen and (max-width: 1330px) {
                  display: none;
                }
              }

              .reserve {
                float: right;
                color: #979ca0;
                font-size: 14px;
                vertical-align: center;
                @media screen and (max-width: 1490px) {
                  font-size: 12px;
                }
              }
            }

            .class-detail {
              padding-top: 8px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              span {
                color: #979ca0;
                font-size: 13px;
              }
            }

            .class-button {
              height: 32px;
              // padding-top: 4px;
              .el-button {
                float: right;
                margin-left: 10px;
                @media screen and (max-width: 1610px) {
                  font-size: 12px;
                  margin-left: 2px;
                  width: auto;
                  text-align: center;
                  padding: 7px 7px;
                }
              }
            }
          }
        }
      }
    }

    .el-pagination {
      width: 100%;
      text-align: center;
      height: 30px;
      margin-top: 12px;
    }
  }
</style>
